<template>
    <div>
        <h1 id="a" @click="show = !show">h1</h1>
        <h1 ref="b" @click="fun()">h2</h1>
        {{str}}
        <BlobalCom v-if="show"></BlobalCom>
    </div>
</template>
<script>

export default ({
    name:'App2',
    data(){
        return {
            str:'初始数据',
            count:1,
            show:false
        }
    },
    methods:{
        fun(){
            this.$refs.b.innerText='str'
        }
    },
    beforeCreate () {
        console.log('BeforeCreated',this.str)
    },
    created(){
        console.log('created',this.str)
        console.log('created - id',document.getElementById('a'))
        console.log('created - ref',this.$refs.b);
        // setInterval(() => {
        //     this.count++
        //     this.str = 'new Date' + this.count
        // }, 1000);
        
    },
    beforeMount(){
        console.log('beforeMount - id',document.getElementById('a'))
        console.log('beforeMount - ref',this.$refs.b)
    },
    mounted(){
        console.log('mounted - id',document.getElementById('a'))
        console.log('mounted - ref',this.$refs.b)
        this.$refs.b
    },
    // beforeUpdate(){
    //     console.log('beforeUpdate - id',document.getElementById('a'))
    //     console.log('beforeUpdate - ref',this.$refs.b)
    // },
    // updated(){
    //     console.log('updated- id',document.getElementById('a'))
    //     console.log('updated - ref',this.$refs.b)
    // },

})
</script>
